import { View, Text } from "@tarojs/components";
import { Table, Price, Pagination, Image } from "@nutui/nutui-react-taro";
import { useState, useEffect } from "react";
import Taro, { useRouter } from "@tarojs/taro";
import { getCode, pageList } from "@/api/distribution";
import dayjs from "dayjs";
import "./index.scss";
const DistributionDetail = () => {
  const router = useRouter();
  const { params } = router;

  const columns = [
    {
      title: "兑换码",
      align: "center",
      render: (row: any) => {
        return (
          <View
            className="flex items-center justify-center gap-2"
            onClick={() => {
              Taro.setClipboardData({
                data: row?.code,
              });
            }}
          >
            {row?.code}
            <Image
              width={15}
              height={15}
              src={require("../../assets/distribution/copy.svg")}
            />
          </View>
        );
      },
      key: "code",
    },
    {
      title: "课程名称",
      align: "center",
      dataIndex: "dataName",
      key: "dataName",
    },
    {
      title: "绑定时间",
      align: "center",
      render: (row: any) =>
        row?.setDataTime
          ? dayjs(row?.setDataTime).format("YYYY-MM-DD HH:mm:ss")
          : "-",
      key: "setDataTime",
    },
    {
      title: "兑换用户",
      align: "center",
      dataIndex: "usedUserName",
      key: "usedUserName",
    },
    {
      title: "兑换时间",
      align: "center",
      render: (row: any) => {
        return row?.useTime
          ? dayjs(row?.useTime).format("YYYY-MM-DD HH:mm:ss")
          : "暂未兑换";
      },
      key: "useTime",
    },
  ];
  const [codeDetail, setCodeDetail] = useState<any>(null);

  const [pageNo, setPageNo] = useState(1);
  const [total, setTotal] = useState(0);
  const [tableData, setTableData] = useState<any[]>([]);

  useEffect(() => {
    getCode({ id: params.id }).then((res) => {
      setCodeDetail(res?.data);
    });
    pageList({ pageNo, pageSize: 10, bizId: params.id }).then((res) => {
      if (res.data) {
        setTableData(res?.data?.list);
        setTotal(res?.data?.total);
      }
    });
  }, [pageNo]);
  return (
    <View className="bg-[#F5F5F5] p-3 min-h-screen box-border distribution-detail">
      <View className="bg-white mb-4 p-4 flex flex-col gap-4 text-sm rounded-md">
        <View>
          <Text className="font-semibold">课程名称：</Text>
          <Text>{codeDetail?.name}</Text>
        </View>
        <View>
          <Text className="font-semibold">购买时间：</Text>
          <Text>
            {dayjs(codeDetail?.createTime).format("YYYY-MM-DD HH:mm:ss")}
          </Text>
        </View>
        <View>
          <Text className="font-semibold">过期时间：</Text>
          <Text>
            {tableData[0]?.validEndTime
              ? dayjs(tableData[0]?.validEndTime)?.format("YYYY-MM-DD hh:mm:ss")
              : ""}
          </Text>
        </View>
        <View>
          <Text className="font-semibold">购买总价格：</Text>
          <Price
            className="!text-[#fa2c19]"
            price={codeDetail?.payPrice / 100}
          />
        </View>
      </View>

      <View className="flex justify-end mt-4 text-[28rpx] bg-white p-4 rounded-md">
        <Text>
          兑换码：{codeDetail?.codeCountRespVO?.usedCount}/
          {codeDetail?.codeCountRespVO?.totalCount}
        </Text>
      </View>

      <Table columns={columns} data={tableData} />

      {total > 10 && (
        <Pagination
          className="flex justify-center"
          value={pageNo}
          total={total}
          itemSize={5}
          ellipse
          onChange={setPageNo}
        />
      )}
    </View>
  );
};

export default DistributionDetail;
